<template>
	<view class="record-content">
		<view class="module1">
			<view class="myMoney">
				<view class="myTitle">{{$t('common.myBalance')}} ($)</view>
				<view class="myNum">{{amount}}</view>
			</view>
			<view class="myMoney">
				<view class="myTitle">{{$t('common.teamBalance')}} ($)</view>
				<view class="myNum">{{team}}</view>
			</view>
		</view>
		<view class="module2">
			<view class="statusCard">
				<view class="cardBox" style="margin-right: 11px;">
					<view class="statusNum">{{successSum}}</view>
					<view class="statusText">{{$t('mine.wdRecord.withdrawn')}} ($)</view>
				</view>
				<view class="cardBox" style="margin-right: 11px;">
					<view class="statusNum">{{waitSum}}</view>
					<view class="statusText">{{$t('mine.wdRecord.withdrawing')}} ($)</view>
				</view>
			</view>

			<swiper :current="currentSwiper" class="scroll-view-height" :style="{ 'height': swiperHeight }"
				@change="swipeIndex">
				<swiper-item class="scroll-view-height" :style="{ 'height': swiperHeight }" scroll-y="true">
					<view class="listBox" v-for="item in recordList">

						<view class="listItem">
							<view class="oneList">
								<view class="listTitle">{{$t('mine.withdrawal.amount')}}：{{item.amount}}</view>
								<view class="twoStatus">
									<span v-show="item.status=='0'">{{item.statusDetail}}</span>
									<span v-show="item.status=='1'">{{item.statusDetail}}</span>
									<span v-show="item.status=='2'" style="color: red;">{{item.statusDetail}}</span>
								</view>
							</view>
							<view class="twoList">
								{{$t('mine.wdRecord.realMoney')}}：{{item.actualAmount}}
							</view>
							<view class="twoList">
								{{$t('mine.wdRecord.account')}}：{{item.account}}
							</view>
							<view class="twoList">
								{{$t('mine.wdRecord.withdrawalTime')}}：{{item.createTime}}
							</view>
						</view>

					</view>
				</swiper-item>
			</swiper>
		</view>

	</view>
</template>

<script>
	import {
		countInfo,
		getList
	} from "@/api/withdrawal/withdrawal.js"

	export default {
		data() {
			return {
				amount: 0,
				team: 0,
				successSum: 0,
				waitSum: 0,
				recordList: [],
				status: '',
				currentSwiper: 0,
				swiperHeight: '1000px',
				//每个项的长度
				itemHeight: 115,
				page: 0,
				pageSize: 10,
				isBottom: false
			};
		},
		onLoad() {
			countInfo().then((rsp => {
				if (rsp.code == 200) {
					this.amount = rsp.data.amount;
					this.team = rsp.data.team;
					this.successSum = rsp.data.successSum;
					this.waitSum = rsp.data.waitSum;
					console.log(this.withdrawRate)
				}
			}))
			this.getList('init');


		},
		onReachBottom: function() {
			//是否到底部，如果到了底部就不用查询了
			if (!this.isBottom) {
				this.getList();
			}
		},
		methods: {

			calHeight() {
				var list = this.recordList;
				var height = list.length * this.itemHeight + "px";
				if (height != this.swiperHeight) {
					this.swiperHeight = height;
				}
			},
			getList(isInit) {
				getList({
					'pageNum': ++this.page,
					'pageSize': this.pageSize,
				}).then(rsp => {
					if (rsp.code == 200) {
						this.recordList = this.recordList.concat(rsp.rows);
						this.calHeight();
						var currentNum = this.page * this.pageSize;
						if (currentNum >= rsp.total) {
							//全部
							if ("init" != isInit) {
								uni.showToast({
									title: this.$t('shop.reachedBottom'),
									icon: 'none'
								})
							}
							this.isBottom = true;
						}
					}
				})
			},

		}
	}
</script>

<style lang="scss">
	page {
		background-color: $uni-color-bg;

	}

	.record-content {
		padding: 14px 12px;

		.module1 {
			border-radius: 10px;
			background-color: $uni-color-primary;
			height: 100px;
			display: flex;
			padding: 16px 20px;
			color: $uni-color-box;

			.myMoney {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-around;


				.myTitle {
					font-size: 14px;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
				}

				.myNum {
					font-size: 22px;
					font-family: PingFang SC-Semibold, PingFang SC;
					font-weight: 600;
					height: 30px;
					line-height: 30px;
				}
			}
		}

		.module2 {
			.scroll-view-height {
				//height: calc(100vh - var(--status-bar-height) - 50px - 80px);
				//height: calc(2370px + 40px);
			}

			.statusCard {
				margin: 10px 0;
				display: flex;
				justify-content: space-between;

				.cardBox {
					flex: 1;
					height: 70px;
					background: $uni-color-box;
					box-shadow: 0 3px 6px 1px rgba(0, 0, 0, .12);
					border-radius: 10px;
					display: flex;
					padding: 10px 0;
					justify-content: space-around;
					flex-direction: column;
					align-items: center;

					.statusNum {
						font-size: 20px;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: $uni-color-primary;
					}

					.statusText {
						font-size: 12px;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: $uni-color-subfont;
					}
				}
			}

			.listBox {
				.listItem {
					background: $uni-color-box;
					box-shadow: 0 3px 6px 1px rgba(0, 0, 0, .12);
					border-radius: 10px;
					margin-bottom: 10px;
					padding: 12px 20px;
					font-size: 14px;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: $uni-color-font;

					.oneList {
						display: flex;
						justify-content: space-between;
						padding-bottom: 8px;

						.twoStatus {
							color: $uni-color-primary;
						}
					}

					.twoList {
						padding-bottom: 8px;
					}
				}
			}
		}

	}
</style>